<!--
 * @Description: 
 * @Date: 2020-12-18 15:03:42
 * @LastEditors: lother
 * @LastEditTime: 2021-01-04 16:53:11
 * @FilePath: \AccountOpening-H5\src\components\page\k-upload.vue
-->
<template>
        <van-field name="uploader" class="uploadList noBorder"
        v-model="fileLoad"
        :rules="rulesList">
        <template #input>
            <div class="pors">
                <van-uploader :after-read="afterRead" result-type="file"  :disabled="cardZShow" />
                <div class="por">
                    <div v-show="!fileLoad?true:false">
                        <van-icon name="plus" size="30" :color="btnColor"/>
                        <p>
                            {{list['title_'+langSuff]}}
                        </p>
                    </div>
                    <img :src="fileLoad" alt="" v-show="fileLoad?true:false">
                </div>
                <van-loading :color="color" v-show="cardZShow" />
            </div>
        </template>
    </van-field>
</template>
<script>
import { fff ,btnColor  } from '@/assets/less/global.less'
import { uploads } from '@/api/common'
export default {
    name:"k-upload",
    props:{
        val:{
            type:String,
            default:""
        },
        list:{
            type:Object,
            default:()=>{}
        }
    },
    computed:{
        color(){
            return fff
        },
        btnColor(){
            return btnColor
        },
        langSuff(){
            return  this.$store.state.langSuff
        },
        rulesList(){
            var arr=[]
            if(this.list?.is_require){
                // arr.push({ required: true, message: '请上传'+this.list['title_'+this.langSuff] })
                arr.push({ validator: this.asyncValidator,message: this.$t('login.index.5638tdeew440')+this.list['title_'+this.langSuff]})
            }
            var rules  = this.list?.rule ?? [];
            for (let index = 0; index < rules.length; index++) {
                const item = rules[index];
                 if(item.rule!==''){
                    arr.push({pattern:this.evalreg(item.rule) , message : item['error_tip_'+this.langSuff]})
                }
            }
            return arr
        }
     },
    data() {
        return {
            cardZShow:false,
            fileLoad:'',
        }
    },
    created(){
        this.fileLoad = this.val
    },
    methods:{
         afterRead(file){
            this.cardZShow=true;
            this.uoloadImg(file.file)
        },
         uoloadImg(file){
            var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
        　　formData.append('file',file); //接口需要传的参数
            uploads(formData)
            .then(res=>{
                if(res.code==1){
                    this.cardZShow=false;
                    this.fileLoad = res.data.url;
                    this.$emit('update:val',res.data.url)
                }
            })
            .catch(error=>{
                this.cardZShow=false;
            })
        },
         asyncValidator(val) {
            var bOll;
            if(!this.fileLoad){
                bOll= false
            }else{
                bOll= true
            }
            return bOll
        },
    }
}
</script>
<style lang="less" scoped>
    .uploadList{
        .between;
        padding-top: 0.2rem;
        .pors{
            width: 100%;
            margin: 0 auto;
            background: transparent;
            height: 3rem;
            border: 1px dashed @btnColor;
            border-radius: 3px;
            position: relative;
            overflow: hidden;
            >.por{
                width: 100%;
                height: 100%;
                overflow: hidden;
                text-align: center;
                .center;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
                p{
                    .size;
                }
            }
            .van-loading{
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2;
                position: absolute;
                top:0;
                left: 0;
                .center;
            }
        }
    }
</style>